<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <my-book :name="小明" ></my-book>
        <my-book :name="name" :price="price" v-bind:author="'小明'" v-bind:sales="200"></my-book>
        <my-book :name="name" :price="price" v-bind:author="'小明'" v-bind:result="result"></my-book>

    </div>

    <script>
        Vue.component("my-book", {
            props: {
                name:String,
                price:[String,Number],
                // 必填字段
                author:{
                    type:String,
                    required:true
                },
                // 带默认值 my-book中不绑定sales属性，会默认填写为default的值
                sales:{
                    type:Number,
                    default:100
                },
                result:{
                    validator:function(value){
                        return ['success','warning','danger'].indexOf(value)!==-1
                    }
                }

            },

            template: `
            <div>
                <p>{{name}}</p>
                <p>{{price}}</p>
                <p>{{author}}</p>
                <p>{{sales}}</p>
                <p>{{result}}</p>

            </div>            
            `
        })

        var app = new Vue({
            el: "#app",
            data: {
                name: "西游记",
                price:"10元",
                result:"success"
            }
        });

    </script>
</body>

</html>